<template>
	
	<div class='conver-header'>
		<div class="p-2">
		  <el-form >
			<el-form-item style="height: 40px" class="d-flex ai-center">
				<el-row>
				  <el-button v-for="(item, i) in workList" :key="i" :icon="item.icon" class='el-own-button' :onclick="item.work">
					{{ item.name }}
				  </el-button>
			  </el-row>
			</el-form-item>
		  </el-form>
		 
		
		</div>
	</div>
	<div class='conver-body'>
		<file-area ref="fileChild" ></file-area>
	</div>
	<div class='conver-footer'>
	<footers v-model:title="pageTitle"></footers>
	</div>
	
</template>

<script setup lang="ts">
	import { ref,reactive , onMounted, onUnmounted,framework,getCurrentInstance,nextTick  } from '../adapter-vue';
	import { DocumentAdd, Brush, MagicStick, Message, Star, Delete } from "@element-plus/icons-vue";
	import {SUPPORT_VIDEO_TYPE,getVideoInfo,convertAudio,selectFileMessage,selectVideoMessage,selectAudioMessage} from "../../../utils/tools";
	import {
	  bufferToBase64Url,
	  fileImgToBase64Url,
	  fileReaderAsBuffer,
	} from "../../../utils/message-input-util";
	import footers from "../../components/footer.vue";
	import fileArea from "../../components/fileArea.vue";
   import { fileListDto, openPath } from "../../components/tool";
	
	const {ipcRenderer, remote  } = require('electron');
	
	const fileChild = ref();
	
	const pageTitle = ref({
	  type: "mp4",
	  output: "",
	});
	
	
  
	
	const workList = [
	  {
	    name: "添加文件",
	    work: OpenVideoDir,
	    icon: DocumentAdd,
	    type: "",
	  },
	  {
	    name: "清空文件",
	    work: RemoveFiles,
	    icon: Brush,
	    type: "",
	  },
	  {
	    name: "开始转换",
	    work: BeginConvert,
	    icon: MagicStick,
	    type: "",
	  },
	];
	
	
	
	onMounted(() => {
		ipcRenderer.on("GET_FILE_INFO_CALLBACK", listener);
		
		
	});
	
	onUnmounted(() => {
		ipcRenderer.off("GET_FILE_INFO_CALLBACK",listener);
	});
	
	
	
	
	const listener = (event, params:any) => {
	  const { triggerType, data } = params;
	  
	  switch (triggerType) {
	    case "SELECT_FILES": {
			data.size_txt = getFileSize(data.size)			
			data.status = 0
			fileChild.value.addFile(data);
	      break;
	    }
	    
	  }
	};
	
	const ElementVideo = ()=>{
	   ipcRenderer.on('audio-progress', (event, progress) => {
	       console.log('audio转换进度:',progress.toFixed(2));
	       
	   });
	   ipcRenderer.on('audio-converted', (event, res:any) => {
		  let fileList: Array<fileListDto> = fileChild.value.fileList;
		  fileList[res.params.index].status  = 2
		   console.log('Audio转换完成', res);
	   });
	}
	
	
	const getFileSize = (size:number) =>{
		if (size === 0) return '0 Bytes';
		 
		const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
		const i = parseInt(Math.floor(Math.log(size) / Math.log(1024)), 10);
		return `${(size / Math.pow(1024, i)).toFixed(2)} ${sizes[i]}`;
	}
	
	async function OpenVideoDir() {
		selectAudioMessage();
	}
	
	async function RemoveFiles() {
		fileChild.value.removeAll();
	}
	
	async function BeginConvert() {
		
		// 移除之前的监听器
		ipcRenderer.removeAllListeners('audio-converted');
		ipcRenderer.removeAllListeners('audio-progress');
		// 添加新的监听器
		ElementVideo();
		
		let fileList: Array<fileListDto> = fileChild.value.fileList;
			
		for (let index = 0; index < fileList.length; index++) {
		  let el = fileList[index];
		  let { path:filepath, name, type, status } = fileList[index];		
		  el.status = 1;
		  let ourdir = pageTitle.value.output ? pageTitle.value.output : filepath.substring(0, filepath.indexOf(name));
		  let outpath = ourdir + name.replace('.' + type,'' ) + "_result." + pageTitle.value.type;
		  let info = {inputpath: filepath,index:index,type: pageTitle.value.type,outpath: outpath};
		
		 
		  convertAudio(info)
		  
		}
		
		
	}
	
	
	
	
	
</script>



<style scoped lang="scss">
.conver-header,.conver-footer{margin: 10px;}
.el-own-button{margin-right: 10px;}

</style>
